<template>
    <div class="boxContentCss">
        <EdCreateCard title="基本信息">
            <div class="createBack" @click="$utilsSet.goBack($router)" >
                <svg-icon icon-class="back" /> 返回
            </div>
        
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="项目基础数据" name="first">
                    <!-- <div>项目基础数据</div> -->
                    <el-form ref="projectFormRef" :model="projectForm" label-position="right" label-width="auto">
                        <div class="zh_flex">
                            <el-form-item label="房屋总面积" class="width-m25" prop="area" style="width: 120px;padding-left: 10px;" :rules="$validate.validates({type: 'money'})">
                                <!-- <el-input class="flex-input" placeholder="请输入" v-model="projectForm.area" @input="limitInput($event,'area')"> -->
                                <el-input class="flex-input" placeholder="请输入" v-model="projectForm.area">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
                                </el-input>
                                <!-- <div v-show="projectForm.area.length>0&&!(areaReg.test(projectForm.area))" style="font-size: 12px; color: #F56C6C;">不多于9位，且最多保留两位小数</div> -->
                            </el-form-item>
                            <el-form-item label="项目车位总数" class="width-m25" prop="parkTotal" style="width: 120px;padding-left: 10px;"  >
                            <el-input class="flex-input" placeholder="请输入" v-model.number="projectForm.parkTotal" oninput="this.value=this.value.replace(/[^0-9]/g,'')"></el-input>
                            </el-form-item>
                            <el-form-item label="物业费平均单价" class="width-m25" prop="propertyFee" style="width: 120px;padding-left: 6px;" >
                                <el-input class="flex-input" placeholder="请输入" v-model="projectForm.propertyFee" @input="limitInput($event,'propertyFee')">
                                    <i slot="suffix" style="font-style:normal;margin-right: 10px;">元</i>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="被购买车位数" class="width-m25" prop="buyParkNumber" style="width: 120px;padding-left: 10px;"  >
                                <el-input class="flex-input" placeholder="请输入" v-model.number="projectForm.buyParkNumber" @blur="buyParkBlur" oninput="this.value=this.value.replace(/[^0-9]/g,'')"></el-input>
                            </el-form-item>
                            <div class="projectButton">
                                <el-button class="ed-button ed_black-bottom" @click="saveList('projectFormRef')" >确定</el-button>
                                <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                            </div>
                        </div>
                    </el-form>
                    <!-- <div style="padding: 19px 0;border-top: 1px solid #e5e7eb">增值服务配置</div>
                    <ApiTable :api="tableApi" ref="table" :params="queryForm">
                        <el-table-column type="index" width="80" label="序号"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="name" label="增值服务"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="status" label="状态">
                            <template slot-scope="scope">
                                {{scope.row.status == '0' ? '停用' : '启用'}}
                                <el-switch
                                    :value="scope.row.status == '1' ? true : false"
                                    @change="switchChange(scope.row, scope.row.status == '1' ? '0' : '1')"
                                    active-color="#EED096"
                                    inactive-color="#909399">
                                </el-switch>
                            </template>
                        </el-table-column> 
                    </ApiTable> -->
                </el-tab-pane>
                <el-tab-pane label="停车系统配置" name="second">
                    <el-form ref="payRef" :model="payForm"  :rules="rules" label-position="right" label-width="auto">
                            <el-row v-for="(item, index) in payForm.planDateDTOList" :key="index" :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="停车系统车场ID"  :prop="`planDateDTOList[${index}].parkId`" :rules="$validate.validates({required:true,msg:'请输入停车系统车场ID'})">
                                        <el-input class="flex-input" placeholder="请输入" v-model="item.parkId" maxlength="50"></el-input>
                                        <div v-show="item.parkId.length>51" style="color: #F56C6C;margin-top: 5px;font-size: 12px;">请输入长度小于50的车场ID!</div>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="终端号" :prop="`planDateDTOList[${index}].stationNo`" :rules="rules.stationNo" >
                                        <el-input class="flex-input" placeholder="请输入车位信息，多个终端号请用英文;隔开" v-model="item.stationNo" maxlength="100"></el-input>
                                        <!-- <div>多个终端号以英文;号隔开</div> -->
                                    </el-form-item>
                                </el-col>
                                <el-col :span="18">
                                    <!-- <el-form-item label="车场域名:" class="width-100" prop="baseUrl" @blur="validatorUrl" :rules="{validator: validatorUrl,trigger: 'blur' }"> -->
                                    <el-form-item label="车场域名" :prop="`planDateDTOList[${index}].baseUrl`" :rules="rules.baseUrl">
                                        <el-input class="flex-input" placeholder="请输入" v-model="item.baseUrl" maxlength="500"></el-input>
                                        <!-- <span v-show="item.name_1" class="CorretbaseUrl">请输入正确的域名</span> -->
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-button class="ed-button ed_delete_bottom"  v-if="payForm.planDateDTOList.length > 1" type="info" @click="delTime(index)" icon="el-icon-delete"></el-button>
                                    <el-button  @click="addTime" class="ed-button ed_black-bottom" icon="el-icon-plus"></el-button>
                                </el-col>
                            </el-row>
                        <div  class="projectButton">
                            <el-button class="ed-button ed_black-bottom" @click="saveParkList()" >确定</el-button>
                            <el-button class="ed-button ed_white_bottom" @click="$utilsSet.goBack($router)">取消</el-button>
                        </div>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="门禁系统配置" name="third" lazy>
                    <doorConfigure></doorConfigure>
                </el-tab-pane> 
                <el-tab-pane label="安防视频配置" name="four" lazy>
                    <videoConfigure></videoConfigure>
                </el-tab-pane>
            </el-tabs>
        </EdCreateCard>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import videoConfigure from './components/videoConfigure.vue'
    import doorConfigure from './components/doorConfigure.vue'
    import { defineComponent } from 'vue'
    import {validURL} from 'src/utils/validate'
    import EdSelect from 'src/components/EdSelect.vue'
    import { projectData,checkQueryData,saveParkList,ParkData, incrementServiceList, openService, closeService} from "./api";
    import ApiTable from 'src/components/ApiTable.vue'
    export default defineComponent({
        name: "companyCreate",
        components: { EdCreateCard,EdSelect,videoConfigure,ApiTable,doorConfigure},
        data(){
            const validateUrl = (rule,value,callback) => {
                if(value){
                    if(validURL(value)){
                        callback()
                    } else {
                        callback(new Error("请输入正确的域名：http://..."))
                    }
                } else {
                    callback(new Error("请输入车场域名"))
                }
            }
            return{
                rules: {
                    // parkId: [
                    // { required: true, message: "请输入停车系统车场ID!", trigger: 'blur'},
                    // ],
                    stationNo: [
                    {pattern:  /^[a-zA-Z\d+;?]+$/, required: true, message: "只能输入字母和数字,多个终端号请用英文;隔开!", trigger: 'blur' },
                    ],
                    baseUrl: [
                    { required: true,validator: validateUrl, trigger: 'blur' },
                    ],
                },
                projectForm:{
                    area: '',
                    buyParkNumber: '',
                    parkTotal: '',
                    propertyFee: '',
                    villageId: '',
                    villageName: ""
                },
                areaReg: /^(([1-9][0-9]{0,8})|([0]\.\d{1,2})|([1-9][0-9]{0,8}\.\d{1,2}))$/,
                payForm:{
                    planDateDTOList: [
                        {
                            id:'',
                            configId:'',
                            orgId: this.$store.getters.vid,
                            villageId:this.$route.query.villageId,
                            villageName:'',
                            parkId:'', 
                            stationNo:'', 
                            baseUrl:''
                        }
                    ],
                },
                pickerParams:{
                    valueFormat:"yyyy-MM-dd"
                },
                
                accessControlList:[
                   {name:'', deviceId:'',buildingId:'',orgId:'',unitId:'',villageId:'',stagesId:'',deviceDevType:8}
                ],
                disabled:false,
                isUpdate: false,
                activeName: 'first',
                name_1: false,
                // 增值服务
                queryForm: {
                    villageId: this.$route.query.villageId,
                }
            }
        },
        watch:{
            "$store.getters.vid": {
                handler(newVal, oldVal) {
                    if(newVal) {
                        this.node = ''
                    }
                }
            },
        },
        activated(){
            this.isActiveted = true
            // this.initDic()
            // console.log(this.$refs.elTree);
            // console.log(this.resolve);
            // console.log(this.node);
            if (this.$route.query.villageId) {
                this.queryForm.villageId = this.$route.query.villageId
                this.projectForm.villageId = this.$route.query.villageId
                this.projectForm.villageName = this.$route.query.villageName
                this.checkQueryData()
                // this.ParkData()
            }
            // 增值服务列表
            // this.$nextTick(() => {
            //     this.$refs.table.load(1);
            // })
        },
        deactivated() {
            this.isActiveted = false
            this.projectForm = {}
            this.payForm.planDateDTOList= [
                {
                    id:'',
                    configId:'',
                    orgId: this.$store.getters.vid,
                    villageId:this.$route.query.villageId,
                    villageName:'',
                    parkId:'', 
                    stationNo:'', 
                    baseUrl:''
                }
            ]
            this.projectForm ={
                area: '',
                buyParkNumber: '',
                parkTotal: '',
                propertyFee: '',
                villageId: '',
                villageName: ""
            }
            this.activeName = 'first'
        },
        methods:{
            tableApi: incrementServiceList,
            addAccessContro() {
                let params = {
                    orgId: this.$store.getters.vid,
                    orgName:this.$store.getters.orgName,
                    villageId:this.$route.query.villageId,
                    deviceDevType:8,
                    name:'', deviceId:'',deviceName:'',
                }
                this.checkfigQueryForm.accessControlList.push(params)
            },
            saveList(formName){
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        if(this.projectForm.buyParkNumber&& this.projectForm.parkTotal){
                            if(this.projectForm.buyParkNumber>this.projectForm.parkTotal){
                                // console.log('11', this.projectForm.buyParkNumber>this.projectForm.parkTotal)
                                this.$message.warning({
                                    message:'购买车位数不能大于项目总数',
                                    duration: 2000,
                                    center:true
                                })
                                return
                            }
                        }
                        projectData(this.projectForm).then(response => {
                            if(response.success) {
                                this.$message.success({
                                    message: '添加项目基础数据成功！',
                                    duration: 2000,
                                    center:true
                                });
                                this.$router.back()
                            }
                        })  
                    }
                })
            },
            saveParkList(){
                this.$refs['payRef'].validate((valid)=>{
                    if(!valid) {
                        return
                    }
                    this.payForm.planDateDTOList.forEach(item=>{
                        item.villageId = this.$route.query.villageId
                        item.villageName = this.$route.query.villageName
                    })
                    saveParkList(this.payForm.planDateDTOList).then(response => {
                        if(response.success) {
                            this.$message.success({
                                message: '新增停车系统配置成功！',
                                duration: 2000,
                                center:true
                            });
                            this.$router.back()
                        }
                    }) 
                })
            },
            // tab栏切换到门禁系统配置的时候调下拉框的数据,跟回显的东西
            handleClick(e){
                if(e.name=="first"){
                    if (this.$route.query.villageId) {
                        this.queryForm.villageId = this.$route.query.villageId
                        this.projectForm.villageId = this.$route.query.villageId
                        this.projectForm.villageName = this.$route.query.villageName
                        this.checkQueryData()
                        // this.ParkData()
                    }
                }
                if(e.name=="second"){
                    this.ParkData()
                }
            },
            // 停车配置回显接口
            checkQueryData(){
                checkQueryData(this.projectForm).then(response=>{
                    if(response.success){
                        this.projectForm = {
                            ...this.projectForm,
                            ...response.data
                        }
                        // this.projectForm.area = response.data.area||''
                        // this.projectForm.buyParkNumber = response.data.buyParkNumber
                        // this.projectForm.parkTotal = response.data.parkTotal
                        // this.projectForm.propertyFee = response.data.propertyFee
                    }
                })
            },
            ParkData(){
                ParkData({villageId:this.$route.query.villageId}).then(response=>{
                    if(response.success && response.data && response.data.length>0){
                        response.data&&response.data.map((v, i)=>{
                            v['id'] = v['configId']
                        })
                        this.payForm.planDateDTOList = response.data
                    }
                })
            },
            addTime() {
                let obj = {orgId: this.$store.getters.vid, parkId:'', stationNo:'', baseUrl:'',villageId:this.$route.query.villageId}
                this.payForm.planDateDTOList.push(obj)
            },
            delTime(index) {
                this.payForm.planDateDTOList.splice(index, 1)
            },
            limitInput(value, name) {
                let val = (value && value.split("")) || [];
                let reg1 = /\d/;
                let reg2 = /\./;
                // 第一个字符不能为小数点
                if (val[0] == ".") {
                    this.form[name] = "";
                    return;
                }
                // 过滤掉除数字和小数点外的字符
                val = val.filter((e) => reg1.test(e) || reg2.test(e));
                // 匹配小数点后只能有两位小数 ^\d* 是指以数字开头，后面允许输入0到多位数字 (\.?) 
                // 是指只允许一个小数点 \d{0,2} 是指只允许0到2位小数
                this.projectForm[name] = val.join("").match(/^\d*(\.?\d{0,2})/g)[0] || null;
            },
            buyParkBlur(){
                if(this.projectForm.buyParkNumber&& this.projectForm.parkTotal){
                    if(this.projectForm.buyParkNumber>this.projectForm.parkTotal){
                        this.$message.warning('购买车位数不能大于项目总数')
                        this.projectForm.buyParkNumber = ''
                    }
                }
            },
            doorDeviceChange(row){
                let option = this.doorDeviceParams.options.find(x=>x.value==row)
                option.disabled = true
            },
            // 增值服务 启用/停用
            switchChange(row, value){
                // vasType： 1.房屋租赁 2.车位租赁 3.装修申报 4.工具借用
                let vasType;
                if(row.name == '房屋租赁'){
                    vasType = 1
                }else if(row.name == '车位租赁'){
                    vasType = 2
                }else if(row.name == '装修申报'){
                    vasType = 3
                }else if(row.name == '工具借用'){
                    vasType = 4
                }
                let params = {
                    villageId: this.$route.query.villageId,
                    vasType,
                }
                let func = value==1 ? openService : closeService;
                func(params).then(res => {
                    if(res.code === 20000){
                        this.$message.success({
                            message: value == '1' ? '启用成功' : '停用成功',
                            duration: 2000,
                            center:true
                        })
                        this.$refs.table.load()
                    }
                })
            },
        }
    })
</script>

<style scoped lang="scss">
    :deep {
        .el-tabs{
            padding: 24px 40px !important;
            
            .el-tabs__item{
                font-size: 18px !important;
            }
        }
        // .el-row{
        //     margin-top: 20px;
        // }
        .el-breadcrumb{
                font-family: 'Noto Sans SC';
                font-style: normal;
                font-weight: 500;
                font-size: 14px;
                line-height: 22px;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 13px 10px;
                gap: 6px;
                height: 48px;
                background: #F4F4F4;
                margin-bottom: 25px;
        }
        .el-card__header{
            height: 48px;
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 22px;
            display: flex;
            align-items: center;
            font-feature-settings: 'tnum' on, 'lnum' on;
            color: #606266;
            background: #F4F4F4;
            // margin-bottom: 25px;
        }
        .el-card__body{
            padding: 0;
        }
        .el-tree-node__content{
            width: 270px;
            height: 48px;
            // background: #FEF9F0;
        }
        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            background-color: #FEF9F0;
            width: 100%;
            // border-bottom: red;
        }
        .el-tree-node__content:hover {
            background-color: #FEF9F0;
            width: 100%;
        }
    }
    .boxContentCss{
        position: relative;
        .createBack{
            position: absolute;
            top: 28px;
            right: 42px;
            z-index: 10;
        }
        .img_center{
            display: flex;
            align-items: center;
        }
        .form_btns{
            display: flex;
            justify-content: flex-end;
            // margin-right: 10px;
            margin-top: 30px;
        }
        .specialText{
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: #606266;
            margin-top: 5px;
        }
        .createAdd {
           position: absolute;
           top: 18px;
           right: 109px;
           z-index: 10;
        }
    }
.projectButton{
    width: 100%;
    // flex: 1;
    // display: flex;
    // justify-content: flex-start;
    margin-left: 115px;
    margin-top: 50px ;
}
.el-form-item {
    margin-left: 28px;
}
.CorretbaseUrl{
    color: red;
}
.zh_flex {
    display: flex;
    flex-wrap: wrap;
    padding: 28px 7px 28px 7px;
}
.el-form-item[data-v-e117c544] {
    margin-left: 0px;
}
:deep {
        .el-tabs{
            padding: 24px 40px !important;
            .el-tabs__item{
                font-size: 18px;
                color: #8b8b9b;
            }
            .el-tabs__item.is-active{
                color: #1C1C1E;
                font-weight: 500 ;
            }
            .el-tabs__item:hover{
                color: #1C1C1E;
            }
            .el-tabs__active-bar{
                background: #EED096;
                height: 4px;
            }
        }
    }
</style>